import React, { useState } from "react";
import {
  ResultPage,
  Card,
  Button,
  Popup,
  CalendarPickerView,
} from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { LoopOutline } from "antd-mobile-icons";
import styles from "./home.module.css";
import { huan, dateq } from "../../store/city";
import dayjs from "dayjs";
function Index() {
  const dispatch = useDispatch();
  let nav = useNavigate();
  const { start, end, date } = useSelector((state) => state.city);
  const tostart = (type) => {
    nav(`/city/${type}`);
  };
  const fangfa = () => {
    dispatch(huan());
  };
  const [visible1, setVisible1] = useState(false);
  return (
    <div>
      <ResultPage
        status=""
        title="火车票"
        description="便捷购票，服务您每一次出行"
      >
        <ResultPage.Card style={{ height: 64, padding: 8 }}>
          <div className={styles.box}>
            <span onClick={() => tostart("start")}>{start}</span>
            <span>
              <LoopOutline onClick={() => fangfa()} />
            </span>
            <span onClick={() => tostart("end")}>{end}</span>
          </div>
          <div>
            <span onClick={() => setVisible1(true)}>{date}</span>
          </div>
        </ResultPage.Card>
        <Button block color="primary" size="large" onClick={() => nav("/list")}>
          查询
        </Button>
      </ResultPage>
      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <CalendarPickerView
          min={dayjs(dayjs())}
          max={dayjs(dayjs().add(14, "day"))}
          onChange={(val) => {
            dispatch(dateq({ date: dayjs(val).format("YYYY-MM-DD") }));
            setVisible1(false);
          }}
        />
      </Popup>
    </div>
  );
}

export default Index;
